<template>
	<view class="safe-area-inset-bottom personalIndex">
		<view class="banner" @click="bannerShow = true">
			<view class="" v-if="userInfo.top_img_url">
				<u-image width="750rpx" height="520rpx" :src="userInfo.top_img_url"></u-image>
			</view>
			<view class="" v-else>
				<u-image width="188rpx" height="200rpx" src="/static/personal/no_banner.png"></u-image>
				<view class="banner_text">
					<text>点击设置个人主页图片</text>
				</view>
			</view>
		</view>
		<view class="header">
			<view class="">
				<u-image width="160rpx" height="160rpx" src=" " shape="circle">
					<view class="" slot="error">
						<u-icon name="account-fill" size="80" color="#c8c9cc"></u-icon>
					</view>
				</u-image>
			</view>
			<view class="u-m-l-24">
				<view class="header_name">
					<view class="header_info">
						<view class="username">{{userInfo.nick_name}}</view>
						<u-image width="26rpx" height="26rpx"
							:src="userInfo.sex == 1 ? '/static/personal/male.png' : '/static/personal/female.png'">
						</u-image>
					</view>
					<view class="header_btn">
						<text>编辑</text>
					</view>
				</view>
				<view class="u-m-t-14 u-m-l-8">
					<text class="dot_pos" v-for="(item, index) in userInfo.position" :key="index">{{item}}</text>
				</view>
			</view>
		</view>
		<view class="tabs_container">
			<u-tabs :list="list" :is-scroll="false" :height="92"font-size="32" active-color="#000000"
				inactive-color="#666666" :current="current" @change="change" :bar-style="{backgroundColor: '#EB605D'}">
			</u-tabs>
		</view>
		<view class="" v-show="current == 0">
			<view class="info_container">
				<view class="title">形象信息</view>
				<view class="u-m-t-30">
					<view class="scroll-view_H">
						<view class="scroll-view-item_H">
							<view class="item_title">{{userInfo.height}}</view>
							<view class="item_label">身高</view>
						</view>
						<view class="scroll-view-item_H">
							<view class="item_title">{{userInfo.weight}}</view>
							<view class="item_label">体重</view>
						</view>
						<view class="scroll-view-item_H">
							<view class="item_title">{{userInfo.sanwei}}</view>
							<view class="item_label">三围</view>
						</view>
						<view class="scroll-view-item_H">
							<view class="item_title">{{userInfo.shoe}}</view>
							<view class="item_label">鞋码</view>
						</view>
						<view class="scroll-view-item_H">
							<view class="item_title">{{userInfo.clothes}}</view>
							<view class="item_label">衣码</view>
						</view>
					</view>
				</view>
			</view>
			<view class="video_container">
				<view class="title">形象视频</view>
				<view class="video_class" v-if="userInfo.videos.length <= 0" @click="targetUrl('/pages/personal/editVideo')">
					<u-icon name="plus" color="#C5C5C5" size="80"></u-icon>
				</view>
				<view class="video_class" v-else>
					<view v-for="(item, index) in userInfo.videos" :key="index">
						<video :src="item.video_url" style="height: 400rpx;width: 690rpx;" controls></video>
					</view>
				</view>
			</view>
			<view class="imgs_container">
				<view class="title">形象照片</view>
				<view class="imgs_box">
					<u-icon name="plus" color="#C5C5C5" size="80"></u-icon>
				</view>
			</view>
			<view class="main_btn">
				<u-button type="error" :custom-style="{backgroundColor: '#F56B79', borderColor: '#F56B79'}">完善主页</u-button>
			</view>
		</view>
		<view class="" v-show="current == 1">
			<view class="no_moka_class">
				<u-image width="374rpx" height="232rpx" src="/static/personal/no_moka.png"></u-image>
				<view class="no_moka_text">
					<text>还未发布模卡</text>
				</view>
			</view>
			<view class="moka_btn">
				<u-button type="error" :custom-style="{backgroundColor: '#F56B79', borderColor: '#F56B79'}">制作模卡</u-button>
			</view>
		</view>
		
		<u-mask :show="bannerShow" @click="bannerShow = false">
			<view class="warp">
				<view class="u-m-b-14">
					<u-button :custom-style="maskBtnStyle" @click="editTopImage">编辑</u-button>
				</view>
				<u-button :custom-style="maskBtnStyle" @click="bannerShow = false">取消</u-button>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				maskBtnStyle: {
					color: '#7DBAE9', 
					height: '88rpx',
					borderRadius: '16rpx',
					borderColor: 'transparent',
				},
				userInfo: {
					top_img_url: '',
					sex: 1,
					position: ['模特', '演员'],
					height: '185',
					weight: '60',
					nick_name: '张三',
					birthday: '2016-08-12',
					sanwei: '88-88-88',
					shoe: '42',
					clothes: '30',
					videos: []
				},
				list: [{
					name: '主页'
				}, {
					name: '模卡'
				}],
				current: 0,
				old: {
					scrollTop: 0
				},
				bannerShow: false
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			
			/**
			 * 编辑头图
			 */
			editTopImage() {
				this.bannerShow = false
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						this.userInfo.top_img_url = res.tempFilePaths
					}
				})
			},
			targetUrl(path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.personalIndex {
		background-color: #F7F8FA;
		min-height: 100vh;

		.banner {
			height: 510rpx;
			background-color: #FEF6F7;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.banner_text {
				color: #F8BDC4;
				font-size: 26rpx;
			}
		}

		.header {
			background-color: #FFFFFF;
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			position: relative;
			top: -30rpx;

			.header_name {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: calc(100vw - 60rpx - 160rpx - 24rpx);

				.header_info {
					display: flex;
					align-items: center;
				}

				.username {
					color: #404040;
					font-size: 40rpx;
					margin-right: 14rpx;
					font-weight: bold;
				}

				.header_btn {
					color: #5EB2FF;
					font-size: 26rpx;
				}
			}

			.dot_pos {
				color: #6E6E6E;
				font-size: 28rpx;

				&:after {
					content: ' · '
				}

				&:last-child:after {
					content: ' ';
				}
			}
		}

		.tabs_container {
			background-color: #FFFFFF;
			position: relative;
			border-top: 2rpx solid #F8F8F8;
			top: -30rpx;
			padding: 36rpx 160rpx;
		}
		
		.info_container {
			background-color: #fff;
			position: relative;
			top: -30rpx;
			padding: 30rpx 0;
			
			.title {
				color: #000000;
				font-size: 28rpx;
				margin-left: 30rpx;
				font-weight: bold;
			}
			
			.scroll-view_H {
				width: 100vw;
				display: flex;
				justify-content: space-around;
				height: 80rpx;
			}
			.scroll-view-item_H {
				display: inline-block;
				text-align: center;
				font-size: 28rpx;
				height: 40rpx;
				line-height: 40rpx;
				
				.item_title {
					color: #000000;
					font-weight: bold;
				}
				.item_label {
					color: #999999;
				}
			}
		}
		
		.video_container {
			background-color: #FFFFFF;
			padding: 30rpx;
			position: relative;
			top: -15rpx;
			
			.title {
				color: #000000;
				font-weight: bold;
				font-size: 28rpx;
			}
			
			.video_class {
				background-color: #F3F3F3;
				height: 400rpx;
				width: auto;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;
			}
		}
		.imgs_container {
			background-color: #FFFFFF;
			padding: 30rpx;
			
			.title {
				color: #000000;
				font-weight: bold;
				font-size: 28rpx;
			}
			
			.imgs_box {
				display: flex;
				width: 222rpx;
				height: 320rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #F3F3F3;
				margin-top: 30rpx;
			}
		}
		.main_btn {
			background-color: #fff;
			padding: 30rpx;
		}
		.no_moka_class {
			background-color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 30rpx 30rpx 100rpx 30rpx;
			position: relative;
			top: -30rpx;
			
			.no_moka_text {
				margin-top: 76rpx;
				color: #666666;
				font-size: 28rpx;
			}
		}
		.moka_btn {
			background-color: #fff;
			padding: 30rpx;
			position: relative;
			top: -30rpx;
		}
		
		.warp {
			padding: 0 20rpx;
			position: absolute;
			bottom: 0;
			width: 100vw;
			padding-bottom: env(safe-area-inset-bottom);
		}
	}
</style>
